<template>
    <div class="tougao-middle" style="padding-left:20px;">


        <div style="width:100%;min-height:40px;color:#222222;display:flex;margin-top:20px;">
            <h1>热点投稿</h1>
            <span style="color:#666666;margin-top:10px;">
                <p>（单次最多允许上传1部视频，推荐采用mp4格式，可有效缩短审核转码耗时）</p>
            </span>
        </div>
        <el-upload
            action="#"
            :auto-upload="false"
            accept=".mp4"
            :on-change="beforeFileUpload"
            :limit="1"
            list-type="picture">
            <div style="margin-top:10px;">
                <el-button size="small" type="primary"><i class="el-icon-plus"></i>添加视频</el-button>
            </div>
        </el-upload>

        <el-divider></el-divider>

        <div style="width:100%;min-height:40px;color:#222222;">
            <h1>基本信息</h1>
            <div style="color:#101010;margin-top:20px;">
                <h3><span style="color:red;">*</span>视频封面设置</h3>
                <span style="color:#666666;margin-top:2px;">
                    <p>（格式jpeg、png，文件大小≤5MB）</p>
                </span>
            </div>

            <div style="width:100%;float:left;margin-bottom:20px;">
                <div style="width:33%;float:left;">
                    <el-upload style="margin:20px auto 10px 0"
                               class="avatar-uploader_470x200"
                               accept=".jpg,jpeg,.png"
                               action="#"
                               :auto-upload="false"
                               :show-file-list="false"
                               :on-change="function(file, fileList){ return beforeCoverImgUpload(file,1)}"
                    >
                        <img v-if="videoCoverImgUrl470x200" :src="videoCoverImgUrl470x200" class="avatar_470x200">
                        <i v-else class="el-icon-plus avatar-uploader-icon_470x200">
                        </i>

                    </el-upload>
                    <div>(宽度470px,高度200px图片)</div>
                </div>
            </div>

            <div style="color:#101010;margin-top:20px;">
                <h3><span style="color:red;">*</span>视频分区</h3>
                <div style="margin-top:10px;">
                    <el-cascader disabled
                        v-model="chamVideoForm.videoFenqu"
                        :options="options"
                        separator=" → "></el-cascader>
                </div>
            </div>

            <div style="color:#101010;margin-top:20px;">
                <h3><span style="color:red;">*</span>视频标题</h3>
                <div style="margin-top:10px;">
                    <el-input v-model="chamVideoForm.videoTitle"/>
                </div>
            </div>

            <div style="color:#101010;margin-top:20px;">
                <h3><span style="color:red;">*</span>视频简介</h3>
                <div style="margin-top:10px;">
                    <el-input
                        type="textarea"
                        :rows="6"
                        v-model="chamVideoForm.videoSummary"
                    >
                    </el-input>
                </div>
            </div>
            <div style="margin-top:20px;margin-bottom:60px;">
                <el-button type="primary" @click="doSubmit" :loading="isTougaoLoading">立即投稿</el-button>
            </div>
        </div>

    </div>
</template>

<script>

    import chamUtils from '@/utils/chamUtils';

    export default {
        name: "specialVideoTougao",
        data(){
            return{
                isTougaoLoading:false,
                options: [{
                    value: '00',
                    label: '热点分区'
                }],
                videoCoverImgUrl470x200: '',//预览图
                chamVideoForm:{
                    videoCoverImg470x200:null,
                    videoFenqu:'00',
                    videoTitle:'',
                    videoSummary:''//视频简介
                },
                videoSection:[],//视频文件切片
                uuidList:[],
                fileName:'',
                videoTimeStr:'00:00:00',

            }
        },
        methods:{
            beforeFileUpload(file){
                var self = this;
                file.url =  "http://localhost:8083/cham/img/chaos-video.png";

                //获取视频或者音频时长
                var url = URL.createObjectURL(file.raw);
                var audioElement = new Audio(url);
                //var duration;
                audioElement.addEventListener("loadedmetadata", function(_event) {
                    self.videoTimeStr = chamUtils.getTimeStrFormNum(audioElement.duration);
                });

                self._doFilePiece(file.raw);
            },
            beforeCoverImgUpload(file,index){
                //视频预览图上传前的操作
                var fileRaw = file.raw;
                var self = this;
                var tempVideoCoverImgUrl = URL.createObjectURL(fileRaw);
                if(index===1){
                    self.videoCoverImgUrl470x200 = tempVideoCoverImgUrl;
                    self.chamVideoForm.videoCoverImg470x200 = fileRaw;
                }
            },

            //对要上传的文件进行切片
            _doFilePiece(file){
                //定义切片大小，每个切片大小为2MB
                var bytesPerPiece = 2* 1024 * 1024;
                //定义一个变量用于存储切片数
                var totalPieces;
                //第一步，执行文件切片
                var self = this;
                // var chamVideoForm = self.chamVideoForm;
                var videoFile = file;

                var start = 0;
                var end = 0;
                var index = 0;
                var filesize = videoFile.size;
                var fileName = Date.parse(new Date())+"_"+videoFile.name;
                self.fileName = fileName;
                //计算文件切片总数
                totalPieces = Math.ceil(filesize / bytesPerPiece);
                for(let i=0;i<totalPieces;i++){
                    start = i*bytesPerPiece;
                    end = (i+1)*bytesPerPiece;
                    if(end > filesize) {
                        end = filesize;
                    }
                    var chunk = videoFile.slice(start,end);//切割文件
                    //将切割后的文件放入videoSection中
                    var chunkTempFile = {};
                    chunkTempFile.file = chunk;
                    chunkTempFile.uuid = chamUtils.uuid();
                    self.videoSection.push(chunkTempFile);
                    self.uuidList.push(chunkTempFile.uuid);

                }
            },
            doSubmit(){
                var self = this;
                self.isTougaoLoading = true;
                var fileName = self.fileName;
                var videoSection = self.videoSection;
                //提交视频分片
                for(let i=0;i<videoSection.length;i++){
                    var fileForm = videoSection[i];
                    var formData = new FormData();
                    formData.append("file",fileForm.file);
                    formData.append("uuid",fileForm.uuid);
                    self.$api.post('video-service/tougaoController/videoSection',formData,result=>{
                    });
                }

                //合并分片
                var formData = new FormData();
                formData.append("uuidList",self.uuidList);
                formData.append("fileName",fileName);
                self.$api.post('video-service/tougaoController/mergeVideo',formData,result=>{
                });

                //合并主逻辑
                var chamVideoForm = self.chamVideoForm;
                var videoFenquParent = chamVideoForm.videoFenqu[0];
                var videoFenquChild = chamVideoForm.videoFenqu[1];
                var formData = new FormData();
                formData.append("videoCoverImg470x200",chamVideoForm.videoCoverImg470x200);
                formData.append("fileName",fileName);
                formData.append("videoTitle",chamVideoForm.videoTitle);
                formData.append("videoSummary",chamVideoForm.videoSummary);
                formData.append("videoTimeStr",self.videoTimeStr);
                this.$api.post('video-service/tougaoController/specialVideoTougao',formData,result=>{
                    self.isTougaoLoading = false;
                    if(result==="TOUGAO_SUCCESS"){
                        self.$notify({
                            title: '投稿成功',
                            message: '投稿成功.',
                            type: 'success',
                            position: 'bottom-right'
                        });
                    }
                });


            },
        }
    }
</script>

<style scoped>
    .tougao-middle{
        border-left: 1px solid #f4f4f4;
        width:999px;
        min-height:500px;
        float:left;
    }

    .avatar_470x200 {
        width: 470px;
        height: 200px;
        display: block;
        /*background-color:red;*/
    }

    .avatar-uploader-icon_470x200 {
        font-size: 28px;
        color: #8c939d;
        width: 470px;
        height: 200px;
        line-height: 200px;
        text-align: center;
        /*background-color:red;*/
    }

    .avatar_470x200 {
        width: 470px;
        height: 200px;
        display: block;
        /*background-color:red;*/
    }

    .avatar-uploader_470x200{
        width:470px;
        height:200px;
        margin-top:20px;
        border-radius: 4px;
        border:1px dashed #cccccc;
    }


    /*.avatar-uploader-icon {*/
    /*    font-size: 28px;*/
    /*    color: #8c939d;*/
    /*    width: 220px;*/
    /*    height: 130px;*/
    /*    line-height: 130px;*/
    /*    text-align: center;*/
    /*}*/

    /*.avatar-uploader{*/
    /*    width:220px;*/
    /*    height:130px;*/
    /*    margin-top:20px;*/
    /*    border-radius: 4px;*/
    /*    border:1px dashed #cccccc;*/
    /*}*/

    /*.avatar {*/
    /*    width: 220px;*/
    /*    height: 130px;*/
    /*    display: block;*/
    /*}*/


</style>















<!--<template>-->
<!--    <div class="tougao-middle" style="padding-left:20px;">-->
<!--        <div style="width:100%;min-height:40px;color:#222222;display:flex;margin-top:20px;">-->
<!--            <h1>热点投稿</h1>-->
<!--            <span style="color:#666666;margin-top:10px;">-->
<!--                <p>（单次最多允许上传1部视频，推荐采用mp4格式，可有效缩短审核转码耗时）</p>-->
<!--            </span>-->
<!--        </div>-->
<!--        <el-upload-->
<!--            action="#"-->
<!--            :auto-upload="false"-->
<!--            accept=".mp4"-->
<!--            :on-change="beforeFileUpload"-->
<!--            :limit="1"-->
<!--            list-type="picture">-->
<!--            <div style="margin-top:10px;">-->
<!--                <el-button size="small" type="primary"><i class="el-icon-plus"></i>添加视频</el-button>-->
<!--            </div>-->

<!--            &lt;!&ndash;            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>&ndash;&gt;-->
<!--        </el-upload>-->

<!--        <el-divider></el-divider>-->

<!--        <div style="width:100%;min-height:40px;color:#222222;">-->
<!--            <h1>基本信息</h1>-->
<!--            <div style="color:#101010;margin-top:20px;">-->
<!--                <h3><span style="color:red;">*</span>视频封面设置</h3>-->
<!--                <span style="color:#666666;margin-top:2px;">-->
<!--                    <p>（格式jpeg、png，文件大小≤5MB）</p>-->
<!--                </span>-->
<!--            </div>-->

<!--            <div style="width:100%;float:left;margin-bottom:20px;">-->

<!--                <div style="width:33%;float:left;">-->
<!--                    <el-upload style="margin:20px auto 10px 0"-->
<!--                               class="avatar-uploader_470x200"-->
<!--                               accept=".jpg,jpeg,.png"-->
<!--                               action="#"-->
<!--                               :auto-upload="false"-->
<!--                               :show-file-list="false"-->
<!--                               :on-change="function(file, fileList){ return beforeCoverImgUpload(file,3)}"-->
<!--                    >-->
<!--                        <img v-if="videoCoverImgUrl470x200" :src="videoCoverImgUrl470x200" class="avatar_470x200">-->
<!--                        <i v-else class="el-icon-plus avatar-uploader-icon_470x200">-->
<!--                        </i>-->

<!--                    </el-upload>-->
<!--                    <div>(宽度470px,高度200px图片)</div>-->
<!--                </div>-->

<!--            </div>-->

<!--            <div style="color:#101010;margin-top:20px;">-->
<!--                <h3><span style="color:red;">*</span>视频分区</h3>-->
<!--                <div style="margin-top:10px;">-->
<!--                    <el-cascader disabled-->
<!--                        v-model="chamVideoForm.videoFenqu"-->
<!--                        :options="options"-->
<!--                        separator=" → "></el-cascader>-->
<!--                </div>-->
<!--            </div>-->

<!--            <div style="color:#101010;margin-top:20px;">-->
<!--                <h3><span style="color:red;">*</span>视频标题</h3>-->
<!--                <div style="margin-top:10px;">-->
<!--                    <el-input v-model="chamVideoForm.videoTitle"/>-->
<!--                </div>-->
<!--            </div>-->

<!--            <div style="color:#101010;margin-top:20px;">-->
<!--                <h3><span style="color:red;">*</span>视频简介</h3>-->
<!--                <div style="margin-top:10px;">-->
<!--                    <el-input-->
<!--                        type="textarea"-->
<!--                        :rows="6"-->
<!--                        v-model="chamVideoForm.videoSummary"-->
<!--                    >-->
<!--                    </el-input>-->
<!--                </div>-->
<!--            </div>-->






<!--            <div style="margin-top:20px;margin-bottom:60px;">-->
<!--                <el-button type="primary" @click="doSubmit" :loading="isTougaoLoading">立即投稿</el-button>-->
<!--            </div>-->
<!--        </div>-->

<!--    </div>-->
<!--</template>-->

<!--<script>-->

<!--    import chamUtils from '@/utils/chamUtils';-->

<!--    export default {-->
<!--        name: "specialVideoTougao",-->
<!--        data(){-->
<!--            return{-->
<!--                res:[],-->
<!--                isTougaoLoading:false,-->
<!--                naviSecondSelectIndex:this.$store.getters.getNaviSecondSelectIndex,//二级导航选中的编号-->
<!--                selectedTougaoNavigater:1,-->
<!--                options: [{-->
<!--                    value: '00',-->
<!--                    label: '热点分区'-->
<!--                }],-->
<!--                videoCoverImgUrl220x125: '',//预览图1-->
<!--                // videoCoverImgUrl325x246: '',//预览图2-->
<!--                videoCoverImgUrl470x200: '',//预览图3-->
<!--                videoCoverImgUrl80x80: '',//预览图4-->
<!--                chamVideoForm:{-->
<!--                    videoCoverImg470x200:null,-->
<!--                    videoFenqu:'00',-->
<!--                    videoTitle:'',-->
<!--                    videoSummary:''//视频简介-->
<!--                },-->
<!--                videoSection:[],//视频文件切片-->
<!--                uuidList:[],-->
<!--                fileName:''-->

<!--            }-->
<!--        },-->
<!--        methods:{-->
<!--            beforeFileUpload(file){-->
<!--                var self = this;-->
<!--                self.$api.get('sysController/getVideoPlayerLogo',null, result => {-->
<!--                    file.url = result;-->
<!--                    self.userHeadImgBase64 = result;-->
<!--                });-->

<!--                self._doFilePiece(file.raw);-->

<!--                //self.chamVideoForm.videoFile = file.raw;-->

<!--                //修改上传视频的预览图片为一个播放器的图片，因为视频没有办法做预览图。-->
<!--                // file.url="https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"-->
<!--                // var self = this;-->
<!--                // console.log(self.fileList)-->
<!--            },-->
<!--            //对要上传的文件进行切片-->
<!--            _doFilePiece(file){-->
<!--                //定义切片大小，每个切片大小为2MB-->
<!--                var bytesPerPiece = 2* 1024 * 1024;-->
<!--                //定义一个变量用于存储切片数-->
<!--                var totalPieces;-->
<!--                //第一步，执行文件切片-->
<!--                var self = this;-->
<!--                // var chamVideoForm = self.chamVideoForm;-->
<!--                var videoFile = file;-->

<!--                var start = 0;-->
<!--                var end = 0;-->
<!--                var index = 0;-->
<!--                var filesize = videoFile.size;-->
<!--                var fileName = Date.parse(new Date())+"_"+videoFile.name;-->
<!--                self.fileName = fileName;-->

<!--                //计算文件切片总数-->
<!--                //计算文件切片总数-->
<!--                totalPieces = Math.ceil(filesize / bytesPerPiece);-->
<!--                for(let i=0;i<totalPieces;i++){-->
<!--                    start = i*bytesPerPiece;-->
<!--                    end = (i+1)*bytesPerPiece;-->
<!--                    if(end > filesize) {-->
<!--                        end = filesize;-->
<!--                    }-->
<!--                    var chunk = videoFile.slice(start,end);//切割文件-->
<!--                    //将切割后的文件放入videoSection中-->
<!--                    var chunkTempFile = {};-->
<!--                    chunkTempFile.file = chunk;-->
<!--                    chunkTempFile.uuid = chamUtils.uuid();-->
<!--                    self.videoSection.push(chunkTempFile);-->
<!--                    self.uuidList.push(chunkTempFile.uuid);-->

<!--                }-->
<!--            },-->
<!--            doSubmit(){-->
<!--                var self = this;-->
<!--                self.isTougaoLoading = true;-->
<!--                var fileName = self.fileName;-->
<!--                var videoSection = self.videoSection;-->

<!--                //提交视频分片-->
<!--                for(let i=0;i<videoSection.length;i++){-->
<!--                    var fileForm = videoSection[i];-->
<!--                    var formData = new FormData();-->
<!--                    formData.append("file",fileForm.file);-->
<!--                    formData.append("uuid",fileForm.uuid);-->

<!--                    self.$api.post('video-service/tougaoController/videoSection',formData,result=>{-->
<!--                    });-->
<!--                }-->

<!--                // await self.test(formData)-->

<!--                // var timestamp = Date.parse(new Date());-->
<!--                // var fileName =-->

<!--                var newFileName;-->
<!--                //合并分片-->
<!--                var formData = new FormData();-->
<!--                formData.append("uuidList",self.uuidList);-->
<!--                formData.append("fileName",fileName);-->
<!--                self.$api.post('video-service/tougaoController/mergeVideo',formData,result=>{-->
<!--                    // newFileName = result;-->
<!--                });-->



<!--                //合并主逻辑-->
<!--                var chamVideoForm = self.chamVideoForm;-->
<!--                var videoFenquParent = chamVideoForm.videoFenqu[0];-->
<!--                var videoFenquChild = chamVideoForm.videoFenqu[1];-->
<!--                var formData = new FormData();-->
<!--                formData.append("videoCoverImg80x80",chamVideoForm.videoCoverImg80x80);-->
<!--                formData.append("videoCoverImg220x125",chamVideoForm.videoCoverImg220x125);-->
<!--                formData.append("fileName",fileName);-->
<!--                // formData.append("newFileName",newFileName);-->
<!--                formData.append("videoCoverImg470x200",chamVideoForm.videoCoverImg470x200);-->
<!--                formData.append("videoFenquParent",videoFenquParent);-->
<!--                formData.append("videoFenquChild",videoFenquChild);-->
<!--                formData.append("videoTitle",chamVideoForm.videoTitle);-->
<!--                formData.append("videoSummary",chamVideoForm.videoSummary);-->
<!--                this.$api.post('video-service/tougaoController/tougao',formData,result=>{-->
<!--                    self.isTougaoLoading = false;-->
<!--                    if(result==="TOUGAO_SUCCESS"){-->
<!--                        self.$notify({-->
<!--                            title: '投稿成功',-->
<!--                            message: '投稿成功.',-->
<!--                            type: 'success',-->
<!--                            position: 'bottom-right'-->
<!--                        });-->
<!--                    }-->
<!--                });-->


<!--            },-->
<!--        }-->
<!--    }-->
<!--</script>-->

<!--<style scoped>-->
<!--    .tougao-middle{-->
<!--        border-left: 1px solid #f4f4f4;-->
<!--        width:999px;-->
<!--        min-height:500px;-->
<!--        /*border-left: 1px solid #f4f4f4;*/-->
<!--        /*background-color:red;*/-->
<!--        /*margin:20px auto 60px auto;*/-->
<!--        float:left;-->
<!--    }-->

<!--    .avatar-uploader-icon {-->
<!--        font-size: 28px;-->
<!--        color: #8c939d;-->
<!--        width: 220px;-->
<!--        height: 130px;-->
<!--        line-height: 130px;-->
<!--        text-align: center;-->
<!--        /*background-color:red;*/-->
<!--    }-->

<!--    .avatar-uploader-icon_80 {-->
<!--        font-size: 28px;-->
<!--        color: #8c939d;-->
<!--        width: 80px;-->
<!--        height: 80px;-->
<!--        line-height: 80px;-->
<!--        text-align: center;-->
<!--        /*background-color:red;*/-->
<!--    }-->



<!--    .avatar-uploader-icon_470x200 {-->
<!--        font-size: 28px;-->
<!--        color: #8c939d;-->
<!--        width: 300px;-->
<!--        height: 130px;-->
<!--        line-height: 130px;-->
<!--        text-align: center;-->
<!--        /*background-color:red;*/-->
<!--    }-->


<!--    /*.tougao-middle-navi{*/-->
<!--    /*    !*background-color:red;*!*/-->
<!--    /*    float:left;*/-->
<!--    /*    width:200px;*/-->
<!--    /*    min-height:500px;*/-->
<!--    /*    !*border-right: 1px solid #f4f4f4;*!*/-->
<!--    /*    !*background-color:red;*!*/-->
<!--    /*    !*margin:20px auto 160px auto;*!*/-->
<!--    /*}*/-->

<!--    /*.tougao-middle{*/-->
<!--    /*    border-left: 1px solid #f4f4f4;*/-->
<!--    /*    width:999px;*/-->
<!--    /*    min-height:500px;*/-->
<!--    /*    !*border-left: 1px solid #f4f4f4;*!*/-->
<!--    /*    !*background-color:red;*!*/-->
<!--    /*    !*margin:20px auto 60px auto;*!*/-->
<!--    /*    float:left;*/-->
<!--    /*}*/-->

<!--    .avatar-uploader{-->
<!--        width:220px;-->
<!--        height:130px;-->
<!--        margin-top:20px;-->
<!--        /*background-color:red;*/-->
<!--        border-radius: 4px;-->
<!--        border:1px dashed #cccccc;-->
<!--    }-->

<!--    .avatar-uploader_80{-->
<!--        width:80px;-->
<!--        height:80px;-->
<!--        margin-top:20px;-->
<!--        /*background-color:red;*/-->
<!--        border-radius: 4px;-->
<!--        border:1px dashed #cccccc;-->
<!--    }-->

<!--    .avatar {-->
<!--        width: 220px;-->
<!--        height: 130px;-->
<!--        display: block;-->
<!--        /*background-color:red;*/-->
<!--    }-->

<!--    .avatar_80{-->
<!--        width: 80px;-->
<!--        height: 80px;-->
<!--        display: block;-->
<!--    }-->

<!--    .avatar-uploader_470x200{-->
<!--        width:300px;-->
<!--        height:130px;-->
<!--        margin-top:20px;-->
<!--        /*background-color:red;*/-->
<!--        border-radius: 4px;-->
<!--        border:1px dashed #cccccc;-->
<!--    }-->

<!--    .avatar_470x200 {-->
<!--        width: 300px;-->
<!--        height: 130px;-->
<!--        display: block;-->
<!--        /*background-color:red;*/-->
<!--    }-->


<!--    /*.avatar-uploader .el-upload {*/-->
<!--    /*    border: 1px dashed #d9d9d9;*/-->
<!--    /*    border-radius: 6px;*/-->
<!--    /*    background-color:red;*/-->
<!--    /*    cursor: pointer;*/-->
<!--    /*    position: relative;*/-->
<!--    /*    overflow: hidden;*/-->
<!--    /*}*/-->

<!--    /*!*.avatar-uploader .el-upload:hover {*!*/-->
<!--    /*!*    border-color: #409EFF;*!*/-->
<!--    /*!*}*!*/-->

<!--    .avatar-uploader-icon {-->
<!--        font-size: 28px;-->
<!--        color: #8c939d;-->
<!--        width: 220px;-->
<!--        height: 130px;-->
<!--        line-height: 130px;-->
<!--        text-align: center;-->
<!--        /*background-color:red;*/-->
<!--    }-->

<!--    .avatar-uploader-icon_80 {-->
<!--        font-size: 28px;-->
<!--        color: #8c939d;-->
<!--        width: 80px;-->
<!--        height: 80px;-->
<!--        line-height: 80px;-->
<!--        text-align: center;-->
<!--        /*background-color:red;*/-->
<!--    }-->



<!--    .avatar-uploader-icon_470x200 {-->
<!--        font-size: 28px;-->
<!--        color: #8c939d;-->
<!--        width: 300px;-->
<!--        height: 130px;-->
<!--        line-height: 130px;-->
<!--        text-align: center;-->
<!--        /*background-color:red;*/-->
<!--    }-->

<!--    /*.cham-tougao-navi-left{*/-->
<!--    /*    width:200px;*/-->
<!--    /*    height:800px;*/-->
<!--    /*    float:left;*/-->
<!--    /*    !*background-color:#FAFAFA;*!*/-->
<!--    /*}*/-->

<!--    /*.cham-tougao-navigater{*/-->
<!--    /*    cursor:pointer;*/-->
<!--    /*    !*width:calc(100% - 40px);*!*/-->
<!--    /*    height:60px;*/-->
<!--    /*    !*margin-left:20px;*!*/-->
<!--    /*    line-height:60px;*/-->
<!--    /*}*/-->

<!--    /*.cham-tougao-navigater:hover{*/-->
<!--    /*    background-color:#E1E4EA;*/-->
<!--    /*}*/-->

<!--    /*.cham-tougao-is-selected{*/-->
<!--    /*    !*background-color:#ECF5FF;*!*/-->
<!--    /*    background-color:#00a1d7!important;*/-->
<!--    /*}*/-->

<!--    /*.cham-tougao-is-selected > svg,.cham-tougao-is-selected >span{*/-->
<!--    /*    color:#ffffff!important;*/-->
<!--    /*}*/-->
<!--</style>-->
